<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>登陆</title>
    <link href="${basePath}/css/bootstrap.min.css" rel="stylesheet">
    <script src="${basePath}/js/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="${basePath}/alert/iosOverlay.css">
 	<script src="${basePath}/alert/iosOverlay.js"></script>
    <script type="text/javascript">
	   	function login() {
	   		var username = $("#username").val();
	   		var password = $("#password").val();
			$.ajax({
				type:"post",
				url:"${basePath}/login",
				dataType:"json",
				data:"username="+username+"&password="+password,
				success:function(data){
					var jsonObject = data;
					if(jsonObject.result){
						location.href="${basePath}/main";
					} else {
						iosOverlay({text: "用户名密码错误",duration: 1e3,icon: "${basePath}/alert/cross.png"});
					}
					
				}
			});
		}

    </script>
  </head>
  <body name="login" style="background: url(${basePath}/img/loginbg.jpg);position: absolute;min-width: 310px;min-height: 270px;width: 100%;height: 100%;">
  	<div style="width: 310px;height: 270px;position: absolute;left: 50%;top: 50%;margin: -135px -155px;" class="panel panel-default">
	  	<div style="width: 290px;height: 250px;position: absolute;left: 10px;top: 10px;" class="panel-body">
		    <form>
			  <div class="input-group input-group-lg" style="margin-bottom: 10px;">
				  <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
				  <input type="text" id="username" name="username" class="form-control" placeholder="User name" aria-describedby="sizing-addon">
				</div>
			  <div class="input-group input-group-lg" style="margin-bottom: 10px;">
				  <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
				  <input type="password" id="password" name="password" class="form-control" placeholder="Password" aria-describedby="basic-addon">
				</div>
			  <button type="button" class="btn btn-success btn-block btn-lg" onclick="login()" style="margin-bottom: 10px;">Sign in</button>
			  <button type="button" class="btn btn-warning btn-block btn-lg" onclick="location.href='${basePath}/register'">Register</button>
			</form>
		</div>
  	</div>
    <script src="${basePath}/js/jquery.min.js"></script>
    <script src="${basePath}/js/bootstrap.min.js"></script>
  </body>
</html>